<template>
  <div class="main" id="box">
    <MyMenu :isCollapse="expand" />
    <div class="content">
      <MyHeader :expand="expand" @changeExpand="handlerExpand" />
      <RouterView class="box" />
    </div>
  </div>
</template>
<script>
import MyHeader from "../components/MyHeader.vue";
import MyMenu from "../components/MyMenu.vue";
import eventBus from "../utils/eventBus";
eventBus.on("changeColor", (payload) => {
  if (payload) {
    box.classList.add("changeColor");
    box.classList.remove("changeColor-day");
  } else {
    box.classList.add("changeColor-day");
    box.classList.remove("changeColor");
  }
});
export default {
  components: {
    MyHeader,
    MyMenu,
  },
  data() {
    return {
      expand: false, //是否展开
    };
  },
  mounted(){
    
  },
  methods: {
    handlerExpand() {
      this.expand = !this.expand;
    },
  },
};
</script>
<style lang="scss" scoped>
#box {
  display: flex;
  height: 100vh;
  .content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    .box {
      flex: 1;
      height: calc(100% - 50px);
      overflow: hidden;
    }
  }
}
.changeColor {
  color: $all_color_night;
  background-color: $all_bgcolor_night;
}

.changeColor-day {
  color: $all_color_day;
  background-color: $all_bgcolor_day;
}
</style>
